<template>
  <el-header class="header">
    <div class="header-left">
      <h1>医院信息管理系统</h1>
    </div>
    <div class="header-right">
      <el-dropdown class="user-dropdown"
        ><el-icon size="40"><Operation /></el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <el-avatar shape="circle" size="40" class="user-avatar"> user </el-avatar>
    </div>
  </el-header>
</template>



<script>
export default {
  name: "HeaderComponent",
};
</script>


<style scoped>
@import url("../assets/css/reset.css");
.header {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 22px;
  color: #fff;
  background: #409eff;
}
.header-left {
  display: flex;
  align-items: center;
  margin-left: 30px;
  font: 30px "微软雅黑";
}
.header-right {
  display: flex;
  justify-content: right;
  align-items: center;
  text-align: right;
  margin-left: 1450px;
}
.user-avatar {
  margin-left: 20px;
}
.user-dropdown {
  cursor: pointer;
  /* color: var(--el-color-primary); */
  display: flex;
  align-items: center;
}
</style>